<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<style>
  img{width:270px;height:400px;opacity:.7}
  img:hover{opacity:1}
</style>

<title>电影网-首页</title>

<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath}/dist/css/bootstrap.min.css"
	rel="stylesheet">


<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/front/offcanvas.css"
	rel="stylesheet">


</head>

<body>
	<nav class="navbar navbar-fixed-top navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project name</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
					<li>

						<form class="form-inline" action="MovieServlet">
							<div class="form-group" style="padding-top: 10px">
								<input type="text" class="form-control" name="keywords"
									placeholder="请输入查询关键字" value="${keywords}">
							</div>
							<div class="form-group" style="padding-top: 10px">
								<button type="submit" class="btn btn-default">查询</button>
							</div>
						</form>


					</li>
				</ul>

			</div>
			<!-- /.nav-collapse -->
		</div>
		<!-- /.container -->
	</nav>
	<!-- /.navbar -->

	<div class="container">

		<div class="row row-offcanvas row-offcanvas-right">

			<div class="col-xs-12 col-sm-9">
				<p class="pull-right visible-xs">
					<button type="button" class="btn btn-primary btn-xs"
						data-toggle="offcanvas">Toggle nav</button>
				</p>
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<p>This is an example to show the potential of an offcanvas
						layout pattern in Bootstrap. Try some responsive-range viewport
						sizes to see it in action.</p>
				</div>
				<div class="row">
				<c:if test="${pd==null}">
				  <c:redirect  url="MovieServlet"></c:redirect>
				</c:if>

					<c:forEach items="${requestScope.pd.data}" var="movie">

						<div class="col-xs-6 col-lg-4">
							<h2>${movie.mname}</h2>
							<p><a href="#"><img alt="" src="${pageContext.request.contextPath}/images/${movie.mpage}"></a></p>
							<p>
								<a class="btn btn-default" href="MovieServlet?op=getById&mid=${movie.mid}" role="button">查看详情
									&raquo;</a>
							</p>
						</div>
						<!--/.col-xs-6.col-lg-4-->

					</c:forEach>
				</div>
				<!--/row-->
			</div>
			<!--/.col-xs-12.col-sm-9-->

			<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
				<div class="list-group" id="top10div">
				<a href='#' class='list-group-item active'>电影评分排行榜</a>
				</div>
			</div>
			<!--/.sidebar-offcanvas-->
		</div>
		<!--/row-->

		<hr>

		<footer>
			<p>&copy; 2016 Company, Inc.</p>
		</footer>

	</div>
	<!--/.container-->


	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
	<script>
		window.jQuery
				|| document
						.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
	</script>
	<script
		src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/front/offcanvas.js"></script>
	
	<script>
	   $(document).ready(function(){
		   // $.get("url",function(res){})
		   $.get("${pageContext.request.contextPath}/MovieServlet?op=top10",function(res){
			   //将res字符串(json) =>转换为JavaScript对象
			   var obj = JSON.parse(res)
			   console.log(obj.code)
			   if(obj.code == 200){
				   console.log(obj.list)
				   //遍历list集合
				   $.each(obj.list,function(index,movie){
					   //找到div
					   $("#top10div").append("<a href='MovieServlet?op=getById&mid="+movie.mid+"' class='list-group-item'>"+(index+1)+"&nbsp;&nbsp;"+movie.mname+"&nbsp;&nbsp;"+movie.mscore+"</a>")
					   
				   })
				  
				   
			   }
		   })
		   
		   
		   
	   });
	</script>
</body>
</html>
